<template>
	<view class="content">
		<!-- 项目基本信息 -->
		<view class="box">
			<view class="cu-list menu margin-top" >
				<view class="cu-item">
					<view class="content">
						<text >施工类型</text>
					</view>
					<view class="action">
						<text>配件转借</text>
					</view>
				</view>
				<view class="cu-item arrow">
					<view class="content">
						<text>选择主机</text>
					</view>
					<view class="action">
						<picker mode="selector" :range="selectList_out" range-key="device_name" @change="changeDeviceOut">
							<text>{{device_name_out?device_name_out:"请选择"}}</text>
						</picker>
					</view>					
				</view>
				
				<!-- 配件选择列表 -->
				<!-- <view class="money-list">
					<view class="money-body">
						<view class="money-item" v-for="(i,j) in selectList_in_part" :key="j">
							<view>
								<text @tap="jian(j)" class="jian">-</text>
								<image v-if="i.image" :src="'https://zl.gxhlkj.cn/'+i.image" mode=""></image>
								<image v-else src="../../../../static/errorr.png" mode=""></image>
								<text>{{i.name}}</text>
								<text style="color: #aaa;margin-left: 20rpx;">
									<text>共</text>
									<text>
										<text>{{i.num}}</text>
										<text>件</text>
									</text>
								</text>
							</view>
							<view class="price">
								<view>
									<text>已选</text>
									<text @click="reduce(j)" class="btn">-</text>
									<text>{{i.select_num}}</text>
									<text @tap="add(j)" class="btn">+</text>
									<text>件</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="part-item" v-if="device_name_out">
					<picker mode="selector" :disabled="selectList_out_part.length>0" :range="selectList_out_part" range-key="part_name" @change="changeDevicePart">
					<text>
						<text class="cuIcon-add"></text>
						<text>{{selectList_out_part.length>0?'添加配件':'该设备无配件'}} </text>
					</text>
					</picker>
				</view> -->
				
				<!-- 保修服务费 -->
				<view class="input-item" style="display: flex; justify-content: space-between;">
					<view class="input-item-head" style="width: 200rpx;">
						<text>服务费</text>
					</view>
					<view class="input-item-content" style="flex: 1;">
						<input v-if="is_service_fee" type="text" @input="ruleFee()" @blur="is_service_fee=false" :focus="is_service_fee" v-model="form.service_fee"  maxlength="10" :placeholder="TIP" />
						<text v-else @click="is_service_fee=true" style="color: #808080;font-size: 28rpx;" class="input">{{form.service_fee||TIP}}</text>
					</view>
				</view>
				<!-- 配件名称 -->
				<view class="input-item" style="display: flex; justify-content: space-between;">
					<view class="input-item-head" style="width: 200rpx;">
						<text>配件名称</text>
					</view>
					<view class="input-item-content" style="flex: 1;">
						<input type="text"  v-model="section.section_name"  maxlength="10" placeholder="请输入配件名称" />
					</view>
				</view>
				<!-- 配件租金 -->
				<view class="input-item" style="display: flex; justify-content: space-between;">
					<view class="input-item-head" style="width: 200rpx;">
						<text>配件租金</text>
					</view>
					<view class="input-item-content" style="flex: 1;">
						<input v-if="isRent" type="text" @input="ruleFee()" @blur="isRent=false" :focus="isRent" v-model="section.rent"  maxlength="10" :placeholder="TIP" />
						<text v-else @tap="isRent=true" style="color: #808080;font-size: 28rpx;" class="input">{{section.rent||TIP}}</text>
					</view>
				</view>
				<!-- 施工地点 -->
				<view class="input-item">
					<view class="input-item-head">
						<text>施工地点</text>
					</view>
					<view class="input-item-content">
						<textarea v-model="form.address" maxlength="50" value="" placeholder="请输入施工地点(50字以内)" />
					</view>
				</view>
				<!-- 施工内容 -->
				<view class="input-item">
					<view class="input-item-head">
						<text>施工详情</text>
					</view>
					<view class="input-item-content">
						<textarea v-model="form.title" maxlength="150" value="" placeholder="请输入施工内容(150字以内)" />
					</view>
				</view>
				<!-- 施工内容 -->
				<view class="input-item">
					<view class="input-item-head">
						<text>工程人员</text>
					</view>
					<view class="member-item" v-for="(i,j) in memberList" :key="j">
						<view class="base-msg">
							<image src="../../../../static/work.png" mode=""></image>
							<text>{{i.realname}}</text>
						</view>
						<view class="right">
							<text class="cuIcon-right"></text>
						</view>
					</view>
					<view class="input-item-content-p" @tap="toAddMember()">
						<text class="cuIcon-add" style="margin-right: 20rpx;"></text>
						<text>添加人员</text>
					</view>
				</view>
			</view>
			<!-- 完成按钮 -->
			<view class="button" @tap="submit()">
				<view>
					<text>发布</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import api from "../../../../network/index.js"
	export default {
		data() {
			return {
				// 输入费用
				TIP: "保留两位小数（单位/元）", // 提示语
				is_service_fee: false, // 是否获得焦点
				isRent: false, // 是否获得焦点
				
				// 保修单
				form:{
					order_service_type_id: "",
					order_device_id: "", // 需要借的主机
					title: "",
					address: "",
					service_fee: ""
				},
				// 配件转借表
				section: {
					order_device_id: "", // 需要借的主机
					borrow_device_id: "", // 被借的主机
					rent: "" // 租金
				},
				
				select_value_in: "选中的值",
				select_value_out: "选中的值",
				selectList_in:[],
				selectList_out:[],
				
				selectList_out_part:[],
				selectList_in_part:[],
				
				memberList:[], // 工程人员
				
				device_name_in: "",
				device_name_out: "",
			};
		},
		methods:{
			// 格式化费用
			ruleFee(){
				// 只能输入数字和小数点，小数点后两位的数全不不保留
				this.form.service_fee=""+this.form.service_fee.replace(/[^\d\.]/g,'')
				this.section.rent=""+this.section.rent.replace(/[^\d\.]/g,'')
				if(this.form.service_fee.indexOf('.')!=-1) this.form.service_fee = this.form.service_fee.substring(0,this.form.service_fee.indexOf('.')+3)
				if(this.section.rent.indexOf('.')!=-1) this.section.rent = this.section.rent.substring(0,this.section.rent.indexOf('.')+3)
			},
			// 去选择成员
			toAddMember(){
				const t = this
				//监听事件
				uni.$on('fire', function(data) {
				    // data即为传过来的值
				    console.log("data", data);
					t.memberList = data.data
				    //清除监听，不清除会消耗资源
				    uni.$off('fire');
				});
				uni.navigateTo({
					url: "../toworkadd/addmember/addmember"
				})
			},
			showTip(tip){
				uni.showToast({
					icon:"none",
					title: tip
				})
			},
			// 发布按钮
			submit(){
				const t = this
				// 收集用户输入的表单数据
				// t.section.borrow_device_id=t.selectList_out[t.select_value_out].id
				t.form.order_service_type_id = 603
				t.section.order_device_id = t.form.order_device_id
				// 检验用户输入的数据
				if(!t.form.order_device_id)return t.showTip("请选择转入主机~")
				if(!t.device_name_out)return t.showTip("请选择转出主机~")
				// if(t.selectList_in_part.length==0)return t.showTip("请至少添加一个配件~")
				if(!t.form.service_fee)return t.showTip("请输入服务费~")
				if(!t.form.address)return t.showTip("请输入施工地址~")
				if(!t.form.title)return t.showTip("请输入施工详情~")
				if(t.memberList.length==0)return t.showTip("请至少选择一位成员~")
				
				// 检验成功-添加维保单-绑定工程人员-绑定配件转借列表
				api.request({
					url: api.SERVICE_ADD,
					data:this.form
				}).then(res=>{
					// console.log(res)
					if(res.data.code == "200"){
						const obj = res
						try{
							// 添加工程人员
							this.memberList.forEach(res=>{
								api.request({
									url: api.SERVICE_ADD_MEMBER,
									data: {
										order_service_id: obj.data.id,
										user_id: res.id,
										coefficient: res.coefficient,
										fixed_wages: res.fixed_wages,
									}
								}).then(res=>{
									
								}).catch(err=>{
									api.error(err)
								})
							})
							// 绑定配件
							t.section.order_service_id = obj.data.id
							api.request({
								url: api.SERVICE_SECTION_ADD,
								data:t.section
							}).then(res=>{
								console.log(res)
							}).catch(err=>{
								api.error(err)
							})
						}catch(e){
							//TODO handle the exception
							t.showTip("出错了~")
						}
						
						// 添加成功跳转页面
						uni.reLaunch({
							url: "../../../success/success?title=发布成功"
						})
					}else{
						api.error(res)
					}
				}).catch(err=>{
					console.log(err)
					api.error(err)
				})
				
			},
			// 请求主机列表
			getDeviceList(){
				api.request({
					url: api.DEVICE_LIST,
				}).then(res=>{
					// console.log(res)
					if(res.data.list == "暂无数据")return
					if(res.data.code == "200"){
						let data = res.data.list.data
						this.selectList_in = JSON.parse(JSON.stringify(data)) 
						this.selectList_out = JSON.parse(JSON.stringify(data)) 
					} else {
						api.error(res)
					}
				}).catch(err=>{
					api.error(err)
				})
			},
			// 选择借入主机
			changeDeviceIn(e){
				this.select_value_in = e.detail.value-0
				this.device_name_in =  this.selectList_in[e.detail.value-0].device_name
			},
			// 选择借出主机
			changeDeviceOut(e){
				this.select_value_out = e.detail.value-0
				this.device_name_out =  this.selectList_out[e.detail.value-0].device_name
				this.section.borrow_device_id = this.selectList_out[e.detail.value-0].id
				// let id = this.selectList_out[e.detail.value-0].id
				// api.request({
				// 	url: api.SERVICE_PART,
				// 	data:{
				// 		order_device_id: "=,"+id
				// 	}
				// }).then(res=>{
				// 	if(res.data.code == "200"){
				// 		this.selectList_out_part = res.data.list.data
				// 	}else{
				// 		api.error(res)
				// 	}
				// }).catch(err=>{
				// 	api.error(err)
				// })
			},
			// 选择配件
			changeDevicePart(e){
				let data = this.selectList_out_part[e.detail.value-0]
				// 需要拿到配件的名字，图片，库存
				let obj = {
					name: data.part_name,
					image: data.part_image,
					num: data.num,
					select_num: 1
				}
				this.selectList_in_part.push(obj)
			},
			// 选择配件数量
			reduce(j){
				console.log(1)
				if(this.selectList_in_part[j].select_num<=1)return
				this.selectList_in_part[j].select_num--
			},
			add(j){
				if(this.selectList_in_part[j].select_num>=this.selectList_in_part[j].num)return
				this.selectList_in_part[j].select_num++
			},
			jian(j){
				this.selectList_in_part=this.selectList_in_part.filter((v,k)=>k!=j)
			}
		},
		onLoad(options) {
			
			// 接受主机id以及赋予维保类型
			this.form.order_service_type_id = 603
			this.section.order_device_id = options.device_id
			this.form.order_device_id = options.device_id
			
			// 获取主机列表
			this.getDeviceList()
		}
	}
</script>

<style lang="scss" scoped>
.money-list-all{
	margin-top: 20rpx;
	display: flex;
	justify-content: space-around;
	height: 88rpx;
	line-height: 88rpx;
}
.money-list{
	.money-head{
		padding: 20rpx;
		font-size: 28rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.money-item{
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #EEEEEE;
		image{
			margin-right: 20rpx;
			width: 80rpx;
			height: 80rpx;
			vertical-align: middle;
		}
		.jian{
			margin-right: 20rpx;
			display: inline-block;
			width: 50rpx;
			text-align: center;
			// height: 50rpx;
			background-color: #e54d42;
			color: #FFFFFF;
			border-radius: 10rpx;
		}
		.price{
			font-size: 24rpx;
			.btn{
				margin: 0 20rpx;
				display: inline-block;
				width: 50rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				background-color: #f5f5f5;
			}
		}
	}
}
.part-item{
	background-color: #FFFFFF;
	padding: 30rpx;
	text-align: center;
	font-size: 30rpx;
	border-bottom: 1rpx solid #EEEEEE;
}	
.input-item{
	background-color: #FFFFFF;
	// border-bottom: 1rpx solid #EEEEEE;
	.member-item{
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		border: 1rpx solid #EEEEEE;
		font-size: 30rpx;
		height: 100rpx;
		line-height: 100rpx;
		.base-msg{
			image{
				width: 80rpx;
				height: 80rpx;
				vertical-align: middle;
			}
		}
	}
	.input-item-content{
		// padding: 30rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		height: 120rpx;
		width: 100%;
		input{
			flex: 1;
			margin: 30rpx 0;
			padding: 0 20rpx;
			height: 40rpx;
			line-height: 40rpx;
			background-color: #ffffee;
			border: 1rpx solid #EEEEEE;
			font-size: 30rpx;
		}
		.input{
			flex: 1;
			padding: 0 20rpx;
			height: 40rpx;
			line-height: 40rpx;
			background-color: #ffffee;
			border: 1rpx solid #EEEEEE;
			font-size: 32rpx;
		}
		textarea{
			padding: 10rpx;
			width: 100%;
			height: 100%;
			line-height: 33rpx;
			background-color: #ffffee;
			border: 1rpx solid #EEEEEE;
			font-size: 30rpx;
		}
	}
	.input-item-head{
		padding: 30rpx;
		font-size: 30rpx;
	}
	.input-item-content-p{
		padding: 30rpx;
		text-align: center;
		border-bottom: 1rpx solid #EEEEEE;
		border-top: 1rpx solid #EEEEEE;
		font-size: 30rpx;
	}
}
.box{
	margin: 0 20rpx;
	background-color: #FFFFFF;
	box-shadow: 4rpx 4rpx 8rpx #AAAAAA;
	padding-bottom: 20rpx;
}
.button{
	view{
		margin: 40rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background-color: #39b54a;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 800;
		border-radius: 20rpx;
	}
}
</style>
